<template>
  <div v-if="Object.keys(goods).length !==0">
    <div class="title">{{goods.title}}</div>
    <div class="price">
      <span class="n-price" @click="aaa">{{goods.price}}</span>
      <span class="o-price"><s>{{goods.oldPrice}}</s></span>
      <span  v-if="goods.discount" class="discount">{{goods.discount}}</span>
    </div>
    <div class="info-other">
      <span>{{goods.columns[0]}}</span>
      <span>{{goods.columns[1]}}</span>
      <span>{{goods.service[goods.service.length-1].name}}</span>
    </div>
    <div class="info-service">
      <span class="info-sercive-item" v-for="index in goods.service.length-1" :key="index">
        <img :src="goods.service[index-1].icon" alt="">
        <span>{{goods.service[index-1].name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detailbaseinfo',

  data() {
    return {
      
    };
  },
  props:{
    goods:{

    }
  },
  mounted() {
  },

  methods: {
    aaa(){
      console.log(this.goods);
    }
  },
};
</script>

<style lang="css" scoped>
.title{
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}
.n-price{
  font-size: 16px;
  color:var(--color-high-text)
}
.o-price{
  font-size: 16px;
  margin-left: 10px;
}
.discount{
  display: inline-block;
  background: #ff5b7a;
  color: #fff;
  border-radius: 30px;
  margin-left: 10px;
}
.info-other{
  display: flex;
  font-size: 13px;
  margin-top: 10px;
  
}
.info-other span{
  flex:1;
  margin-top: 5px;
}
.info-sercive-item{
  text-align: center;
}
.info-other span:first-child,
.info-sercive-item:nth-child(1)
{
  text-align: left;
}
.info-other span:nth-child(2),
.info-sercive-item:nth-child(2)
{
  text-align: center;
}
.info-other span:nth-child(3),
.info-sercive-item:nth-child(3)
{
  text-align: right;
}

.info-service{
  display: flex;
  margin-top: 10px;
  font-size: 12px;
}
.info-sercive-item{
  flex: 1;
}
.info-sercive-item img{
  width: 12px;
  height: 12px;
}
</style>